<template>
  <div class="app-container">
    <el-form  ref="form" :model="form" label-width="160px" @submit.native.prevent>
      <el-form-item label="当前账户绑定手机号">
        <h3 style="display: inline-block;margin: 0;">{{userInfo.registerPhone}}</h3>
        <el-button type="primary" size="mini" icon="el-icon-edit" @click="displayEdit"></el-button>
      </el-form-item>
      <el-form-item label="修改绑定手机号" v-if="edit">
        <el-input
          placeholder="请输入手机号码"
          v-model="form.mobile"
          style="width: 200px">
        </el-input>
      </el-form-item>
      <el-form-item label="验证码" v-if="edit">
        <el-input
          placeholder="请输入验证码"
          v-model="form.verifyCode"
          style="width: 200px">
        </el-input>
        <el-button type="primary" size="mini" @click="sendMsg" v-bind:disabled="isDisabled">{{buttonName}}</el-button>
        <span> 注：若无法获取验证码，请尝试更换手机号码重新获取。</span>
      </el-form-item>
      <el-form-item v-if="edit">
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  // TODO 接口 /web/verify/changeBind  发送验证码  /web/auth/changeBind 执行变更操作
    export default {
      name: "Security",
      data(){
          return{
            form:{
              verifyCode: null,
              mobile: null,
              verifyCodeId: null,
            },
            buttonName:"获取验证码",
            isDisabled:false,
            time:60 * 5,
            edit:false
          }
      },
      computed: {
        userInfo () {
          return this.$store.getters.userInfo
        }
      },
      methods:{
        sendMsg() {
          let self = this;
          let phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
          if (!phoneReg.test(self.form.mobile)) {
            self.$message.error('手机号码格式不正确')
          } else {
            self.$fetch(self.$api.changeBind, {
              mobile: self.form.mobile
            }).then(res => {
              self.form.verifyCodeId = res.data
            })
            self.isDisabled = true;
            let interval = window.setInterval(function() {
              self.buttonName = '（' + self.time + '秒）后重新发送';
              --self.time;
              if(self.time < 0) {
                self.buttonName = "重新发送";
                self.time = 60 * 5;
                self.isDisabled = false;
                window.clearInterval(interval);
              }
            }, 1000);
          }
        },
        displayEdit(){
          this.edit=!this.edit;
        },
        submit () {
          let phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
          let self = this
          if (!phoneReg.test(self.form.mobile)) {
            self.$message.error('手机号码格式不正确')
          } else if (self.form.verifyCode.length === 0) {
            self.$message.error('请输入短信验证码')
          } else {
            self.$fetch(self.$api.authChangeBind, {
              verifyCodeId: self.form.verifyCodeId,
              verifyCode: self.form.verifyCode
            }).then(res => {
              console.log(res)
              if (res.msg === 'OK') {
                self.$message.success('修改绑定成功')
                let userInfo = self.userInfo
                userInfo.registerPhone = self.form.mobile
              }
            })
          }
        }
      },
      created () {
        console.log(this.$store)
      }
    }
</script>

<style scoped>

</style>
